<template>
    <div id="myPet" :style="`height:${contentHeight}`">
        <div class="contentList" v-for="(data,index) in petList" :key="index">
            <van-image
            width="100"
            height="100"
            :src="data.petImage"
            style="margin:1rem"
            />
            <router-link :to="{name:'addPet',params:{petName:data.petName,petBirthday:data.petBirthday,petId:data.petId,petAge:data.petAge,petImgUrl:data.petImage}}">
            <div class="contentTetx">
                <p>萌宠昵称： {{data.petName}}</p>
                <p>萌宠编号： {{data.petId}}</p>
                <p>年龄：{{data.petAge}}  出生日期：{{data.petBirthday}}</p>
            </div>
 </router-link>
        </div>
       
        <div class="navBarButton">
            <van-button tplain type="primary" size="large" @click="addPet">新增宠物</van-button>
        </div>
    </div>
</template>
<script>
import {getMyPetList} from '../../../request/mobile/mine/request_mine'
export default {
    data(){
        return{
            contentHeight:'',
            petList:[],
        }
    },
    methods:{
        getContentHeight(){
            this.contentHeight = window.innerHeight-100+'px'
        },
        addPet(){
            this.$router.push({name:'addPet'})
        },
        getPetList(){
            var uid = 1;
            getMyPetList({userId:uid}).then(res=>{
                if(res.code==200){
                   var dataArray = res.data;
                   for(var data in dataArray){
                       console.log(dataArray[data])
                       this.petList.push(dataArray[data])
                   }
        
                }
            })
        }
    },
    created(){
        this.getContentHeight();
        this.getPetList();
    }
}
</script>
<style scoped>
    .contentList{
        background:#dde1e4;
        display: flex;
    /* margin-top: .3rem; */
        margin:0rem .3rem .3rem .3rem;
        border-radius: 1rem;

    }
    .navBarButton{
         position: fixed;
        bottom: 50px;
        z-index: 9999;
        width: 100%;
    }
    .contentTetx{
        margin-left: 1rem;
    }
    #myPet{
        background: white; 
        overflow-y: scroll;
        width: 100%;   
    }
</style>